<script>

import {blurElement, formatDate, gradeElement} from "../../../util/js/utils";
import InsertInspection from "./dialog/insertInspection/InsertInspection.vue";
import {dictionaryRequest} from "../../../util/js/globalRequestJs";
import {deleteInspection, searchData} from "./inspectionDispatchJs";
import EditInspection from "./dialog/editInspection/EditInspection.vue";

export default {
  name: "InspectionDispatch",
  components: {
    'insert-dialog': InsertInspection,
    'edit-dialog': EditInspection
  },
  data() {
    return {
      tableData: [],
      multipleSelection: [],

      search: {
        status: '',
        huuid: '',
        currentPage: 1,
        pageSize: 5,
      },

      statuses: [],
      totalNumber: 0,
      isInsertDialog: false,
      isEditVisible: false,
      rowData: [],
    }
  },
  mounted() {
    this.getSelectData();
    this.getSearchDate();
  },
  methods: {
    formatDate,
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(newSize) {
      this.search.pageSize = newSize;
      this.getSearchDate();
    },
    handleCurrentChange(newPage) {
      this.search.currentPage = newPage;
      this.getSearchDate();
    },
    // 获取下拉数据
    getSelectData() {
      const _this = this;
      dictionaryRequest('inspection_record', 'status').then(res => {
        _this.statuses = res.data;
      }).catch(() => {
        _this.$router.push('/framework/error');
      })
    },
    // 获取搜索数据
    getSearchDate() {
      const _this = this;
      searchData(_this.search).then((res) => {
        if (res.code === '200') {
          _this.tableData = res.data.data;
          _this.totalNumber = res.data.totalNumber;
        } else {
          _this.$message.error('出错了：' + res.msg);
        }
      }).catch(err => {
        _this.$router.push('/framework/error');
        console.log(err);
      })
    },
    // 打开新增弹窗
    insertInspection() {
      this.isInsertDialog = true;
      blurElement('id-assistant-container', 1.5);
      gradeElement('id-dialog-container', 3);
    },
    // 打开编辑弹窗
    editInspection(row) {
      this.rowData = row;
      this.isEditVisible = true;
      blurElement('id-assistant-container', 1.5);
      gradeElement('id-dialog-container', 3);
    },
    // 关闭弹窗
    closeDialog() {
      this.isInsertDialog = false;
      this.isEditVisible = false;
      blurElement('id-assistant-container', 0);
      gradeElement('id-dialog-container', 1);
      this.getSearchDate();
    },
    // 清空搜索
    clearSearch() {
      this.search.huuid = '';
      this.search.status = '';
      this.getSearchDate();
    },
    // 删除数据
    deleteData() {
      const _this = this;
      if (_this.multipleSelection.length === 0) {
        _this.$message.warning("您未选择数据");
        return false;
      }
      const ids = _this.multipleSelection.map(row => row.iuuid);
      const mUuids = _this.multipleSelection.map(row => row.muuid);

      _this.$confirm('确认是否删除数据？', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确认',
        type: 'warning'
      }).then(() => {
        deleteInspection(ids,mUuids).then(res => {
          if (res.code === '200') {
            _this.$message.success("删除成功")
            _this.getSearchDate();
          } else {
            _this.$message.error("出错了：" + res.msg);
          }
        }).catch(err => {
          _this.$router.push('/framework/error');
          console.log(err)
        })
      }).catch(() => {
        _this.$message.info("已取消删除")
      })
    }
  }
}
</script>

<template>
  <div id="id-main-container" class="id-main-container">
    <div id="id-assistant-container" class="id-assistant-container">
      <div id="id-one-container" class="id-one-container">
        <!--批量操作按钮容器-->
        <div id="id-button-container" class="id-button-container">
          <el-button @click="deleteData()" type="primary" icon="el-icon-delete" size="small"></el-button>
          <el-button @click="insertInspection" type="primary" size="small" icon="el-icon-circle-plus-outline">派遣
          </el-button>
        </div>
        <!--搜索容器按钮-->
        <div id="id-search-container" class="id-search-container">
          <div id="id-search-select-container">
            <el-select v-model="search.status" style="width: 100px"
                       slot="prepend" placeholder="状态" size="small">
              <el-option
                v-for="option in statuses"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          </div>
          &nbsp;
          <div id="id-search-input-container">
            <el-input placeholder="请输入房源ID" v-model="search.huuid" class="input-with-select" style="width: 250px"
                      size="small">
            </el-input>
            <el-button @click="getSearchDate" slot="append" icon="el-icon-search" size="small">搜索</el-button>
            <el-button @click="clearSearch" slot="append" icon="el-icon-s-help" size="small">清空</el-button>
          </div>
        </div>
      </div>
      <!--表格容器-->
      <div id="id-table-container" class="id-table-container">
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          height="100%"
          @selection-change="handleSelectionChange">
          <!--====================序号====================-->
          <el-table-column
            type="index"
            width="30"
            align="center">
          </el-table-column>
          <!--====================选中====================-->
          <el-table-column
            type="selection"
            align="center"
            width="55">
          </el-table-column>
          <!--====================i_uuid====================-->
          <el-table-column
            prop="iuuid"
            v-if=false>
          </el-table-column>
          <!--====================h_uuid====================-->
          <el-table-column
            prop="huuid"
            v-if=false>
          </el-table-column>
          <!--====================m_uuid====================-->
          <el-table-column
            prop="muuid"
            v-if=false>
          </el-table-column>
          <!--====================房源名称====================-->
          <el-table-column
            prop="houseName"
            label="房源名称"
            width="120"
            align="center">
          </el-table-column>
          <!--====================地址====================-->
          <el-table-column
            prop="houseAddress"
            label="地址"
            width="150"
            align="center">
          </el-table-column>
          <!--====================派遣员姓名====================-->
          <el-table-column
            prop="managerUserName"
            label="派遣员"
            width="120"
            align="center">
          </el-table-column>
          <!--====================巡查时间====================-->
          <el-table-column
            prop="inspectionTime"
            label="巡查时间"
            width="180"
            align="center">
            <template slot-scope="scope">
              {{ formatDate(scope.row.inspectionTime) }}
            </template>
          </el-table-column>
          <!--====================巡查结果====================-->
          <el-table-column
            prop="inspectionResult"
            label="巡查结果"
            width="180"
            align="center">
          </el-table-column>
          <!--====================状态====================-->
          <el-table-column
            prop="status"
            label="状态"
            width="100"
            align="center">
            <template slot-scope="scope">
              <span :style="{ color: scope.row.status === '正在派遣' ? 'green' : 'orange'}">{{
                  scope.row.status
                }}</span>
            </template>
          </el-table-column>
          <!--====================操作====================-->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="editInspection(scope.row)">编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div id="id-page-container" class="id-page-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="search.currentPage"
          :page-sizes="[5,10,15,20,50]"
          :page-size="search.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNumber">
        </el-pagination>
      </div>
    </div>
    <div id="id-dialog-container" class="id-dialog-container">
      <div v-if="isInsertDialog" id="id-insert-dialog" class="id-dialog">
        <insert-dialog @closeDialog="closeDialog"></insert-dialog>
      </div>
      <div v-if="isEditVisible" id="id-dialog" class="id-dialog">
        <edit-dialog :rowData="rowData" @closeDialog="closeDialog"></edit-dialog>
      </div>
    </div>
  </div>
</template>


<style scoped>
@import "inspectionDispatchCss.css";
</style>
